<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<link rel="stylesheet" href="/jquery-easyui-1.5.1/themes/bootstrap/easyui.css"/>
<link rel="stylesheet" href="/jquery-easyui-1.5.1/themes/icon.css"/>
<script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<body class="easyui-layout">
<div data-options="region:'north',title:'',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:' Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',title:'',split:true" style="width:200px;"></div>
<div data-options="region:'west',title:'',split:true" style="width:200px;">
    <ul class="easyui-tree">
        <li>
            <span>系統配置</span>
            <ul>
                <li><span><a onclick="addTab('用户管理')">用户管理</a></span></li>
                <li><span><a onclick="addTab('角色管理')">角色管理</a></span></li>
                <li><span><a onclick="addTab('权限管理')">权限管理</a></span></li>
                <li><span><a onclick="addTab('系统参数维护')">系统参数维护</a></span></li>
                <li><span><a onclick="addTab('组织机构管理')">组织机构管理</a></span></li>
            </ul>
        </li>
    </ul>
</div>
<div data-options="region:'center',title:''">
    <div id="tt" class="easyui-tabs" style="width:100%;height: 100%;"></div>
</div>
</body>
</html>
<script>
    function addTab(title){
        if($('#tt').tabs('exists',title)){
            $('#tt').tabs('select',title);
        }else{
            $('#tt').tabs('add',{
                title: title,
                closable:true,
                //...
            });
        }

    }
</script>